<template>
  <div class="resource-manage" ref="caseContainerRef">
    <div class="category-tree" ref="caseTreeCardRef"></div>
    <div class="case-detail-resize" ref="resizeRef"></div>
    <div class="case-detail-resize-drag" ref="resizeDragRef"></div>
    <div class="category-info"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

const resizeRef = ref()
const resizeDragRef = ref()
const caseContainerRef = ref()
const caseTreeCardRef = ref()

const onResizeMousedown = () => {
  resizeDragRef.value.style.display = 'block'
  caseContainerRef.value.style.userSelect = 'none'
  document.onmousemove = onResizeMousemove
  document.onmouseup = onResizeMouseup
}
const onResizeMousemove = (e) => {
  // 结束位置
  const endX = e.clientX
  // 左侧宽度
  const leftWidth = endX - caseContainerRef.value.offsetLeft
  // 右侧宽度
  const rightWidth = caseContainerRef.value.offsetWidth - leftWidth
  // 左侧宽度、右侧宽度最小宽度均为 200px
  if (leftWidth > 200 && rightWidth > 300) {
    resizeDragRef.value.style.left = `${leftWidth}px`
  }
}
const onResizeMouseup = () => {
  caseTreeCardRef.value.style.width = `${resizeDragRef.value.offsetLeft}px`
  resizeDragRef.value.style.display = 'none'
  caseContainerRef.value.style.userSelect = 'auto'
  document.onmousemove = null
  document.onmouseup = null
}

onMounted(() => {
  resizeRef.value.addEventListener('mousedown', onResizeMousedown)
})
onBeforeUnmount(() =>
  resizeRef.value.removeEventListener('mousedown', onResizeMousedown)
)
</script>

<style lang="scss" scoped>
.resource-manage {
  display: flex;
  position: relative;
  height: 300px;

  .category-info {
    flex: auto;
    background-color: aqua;
  }

  .category-tree {
    flex: 0 0 auto;
    width: 25%;
    background-color: antiquewhite;
  }

  .case-detail-resize {
    flex: 0 0 auto;
    width: 3px;
    cursor: col-resize;

    &:hover {
      background-color: #ff3040;
    }
  }

  .case-detail-resize-drag {
    display: none;
    position: absolute;
    width: 3px;
    height: 100%;
    background-color: #409eff;
    cursor: col-resize;
    z-index: 1;
  }
}
</style>
